<template>
    <div>
        <h1>提交考勤</h1>
        <el-card>
            <h2>{{ clazzName }}班</h2>
            <p>课程：{{ courseName }}</p>
            <p>时间：第{{ week }}周 周{{ day }} {{ startPeriod }}-{{ endPeriod }}节</p>
        </el-card>

        <el-table :data="students" style="width: 100%; margin-top: 20px;">
            <el-table-column prop="studentId" label="学生ID" v-if="false" />
            <el-table-column prop="studentNumber" label="学号" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column label="考勤状态">
                <template #default="scope">
                    <el-select v-model="scope.row.attendanceStatus" placeholder="请选择考勤状态">
                        <el-option label="已签到" value="已签到" />
                        <el-option label="缺勤" value="缺勤" />
                        <el-option label="迟到" value="迟到" />
                        <el-option label="早退" value="早退" />
                        <el-option label="事假" value="事假" />
                        <el-option label="病假" value="病假" />
                        <el-option label="公假" value="公假" />
                    </el-select>
                </template>
            </el-table-column>
        </el-table>

        <el-button type="primary" style="margin-top: 20px;" @click="createAttendance">提交考勤</el-button>
    </div>
</template>

<script>
import service from '@/api';

export default {
    data() {
        return {
            courseScheduleId: null,
            clazzId: null,
            clazzName: '',
            courseName: '',
            week: 1,
            day: 1,
            startPeriod: 1,
            endPeriod: 1,
            students: []
        }
    },
    created() {
        this.courseScheduleId = this.$route.params.id;
        this.fetchData();
    },
    methods: {
        async fetchData() {
            // 获取课程安排数据
            const courseSchedule = await service.get(`/api/courses_schedule/${this.courseScheduleId}`, null, "获取课程安排信息");
            this.clazzId = courseSchedule.clazz.id;
            this.clazzName = courseSchedule.clazz.name;
            this.courseName = courseSchedule.courseName;
            this.week = courseSchedule.week;
            this.day = courseSchedule.day;
            this.startPeriod = courseSchedule.startPeriod;
            this.endPeriod = courseSchedule.endPeriod;

            // 获取学生列表
            const students = await service.get(`/api/students/clazz/${this.clazzId}`, null, "获取学生列表");
            this.students = students.map(student => ({
                studentId: student.id,
                studentNumber: student.number,
                name: student.name,
                attendanceStatus: '已签到'
            }));
        },
        async createAttendance() {
            const data = {
                courseSchedule: {
                    id: this.courseScheduleId
                },
                details: this.students.map(student => ({
                    student: { id: student.studentId },
                    status: student.attendanceStatus
                }))
            };

            await service.put(`/api/attendance/clazz/${this.clazzId}`, data, "创建考勤记录");
            this.$message.success('考勤信息保存成功！');
        }
    }
}
</script>

<style scoped>
.el-card {
    margin-bottom: 20px;
}
</style>